'use strict';

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions
} from 'react-native';

import PropTypes from "prop-types";

import constant from '../../config/theme/standard/constant';
import Color from '../../config/theme/standard/color';
import Fonts from '../../config/theme/standard/fonts';

import CircleProgress from './progress/CircleProgress.js';

class SpinContainer extends React.Component {

    constructor(props) {
        super(props)
    }
    componentDidMount() {
        // 监听屏幕宽度变化
        this.dimensionsListener = Dimensions.addEventListener('change', () => {
            this.forceUpdate();
        });
    }
    componentWillUnmount() {
        // 移除监听
        this.dimensionsListener && this.dimensionsListener.remove();

    }
    render() {
        const {
            text,
            textColor,
            circleColor,
            backgroundColor,
            direction,
            visible,
            hasMask,
        } = this.props;

        const containerStyles = [styles.container];
        const backgoundStyles = [styles.backgound];
        const textStyles = [styles.text];

        backgoundStyles.push({ backgroundColor: backgroundColor, flexDirection: direction });
        textStyles.push({ color: textColor });

        let setWidth = { width: Dimensions.get('window').width };
        let spinBackgroundStyle = hasMask ?
            {
                backgroundColor: 'rgba(0, 0, 0, 0.4)',
            } : null

        let spinElement;

        if (this.props.direction == 'row') {
            backgoundStyles.push({ paddingHorizontal: 15, paddingVertical: 11, justifyContent: 'flex-start' })
            textStyles.push({ marginTop: 0, marginLeft: 6 })
        }


        if (visible) {
            spinElement = (
                <View style={[containerStyles, spinBackgroundStyle, setWidth]} >
                    <View style={backgoundStyles}>
                        <CircleProgress color={circleColor} duration={250} size={30} />
                        <Text style={textStyles}>{text}</Text>
                    </View>
                </View>
            )
        } else {
            spinElement = (<View></View>)
        }


        return (
            spinElement
        );
    }
}

SpinContainer.propTypes = {
    /**
     * 提示文字
     */
    text: PropTypes.string,
    /**
     * 文字颜色
     */
    textColor: PropTypes.string,
    /**
     * 进度圈颜色
     */
    circleColor: PropTypes.string,
    /**
     * 背景颜色
     */
    backgroundColor: PropTypes.string,
    /**
     * 进度圈与文字位置关系
     */
    direction: PropTypes.oneOf(['row', 'column']),
    /**
     * 是否可见
     */
    visible: PropTypes.bool,
    /**
     * 是否有遮罩
     */
    hasMask: PropTypes.bool,
}

SpinContainer.defaultProps = {
    text: '正在载入...',
    textColor: Color.spin.textColor,
    circleColor: Color.spin.circleColor,
    backgroundColor: '#333',
    direction: 'column',
    hasMask: false,
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
        height: constant.screenHeight,
        width: constant.screenWidth,
        backgroundColor: 'transparent'
    },
    backgound: {
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
        paddingVertical: 12,
        paddingHorizontal: 43,
        opacity: 0.8,

    },
    text: {
        fontSize: Fonts.spin.textFontSize,
        color: Color.white,
        fontWeight: '400',
        marginTop: 6,
    },
});

export default SpinContainer
